import type { App } from "vue";
import * as echarts from "echarts/core";
import {
  PieChart,
  BarChart,
  LineChart,
  FunnelChart,
  TreemapChart,
  ScatterChart
} from "echarts/charts";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import {
  GridComponent,
  TitleComponent,
  PolarComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  TooltipComponent,
  DataZoomComponent,
  VisualMapComponent
} from "echarts/components";

const { use } = echarts;

use([
  PieChart,
  BarChart,
  LineChart,
  FunnelChart,
  TreemapChart,
  ScatterChart,
  CanvasRenderer,
  SVGRenderer,
  GridComponent,
  TitleComponent,
  PolarComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  TooltipComponent,
  DataZoomComponent,
  VisualMapComponent
]);
/**
 * 自动生成色板: 根据数据长度均匀分布色相
 * @param count 色板数量
 * @param sat 饱和度（%）
 * @param light 亮度（%）
 */
export function generatePalette(count: number, sat = 30, light = 55): string[] {
  return Array.from({ length: count }, (_, i) => {
    const hue = Math.round((360 / count) * i);
    return `hsl(${hue}, ${sat}%, ${light}%)`;
  });
}

// 注册自定义主题：低饱和度炫彩风格
// 默认生成 7 色
echarts.registerTheme("lowSaturationFancy", {
  color: generatePalette(7),
  backgroundColor: "#fff",
  textStyle: { color: "#666", fontFamily: "Helvetica Neue, Arial, sans-serif" },
  title: {
    textStyle: { color: "#333", fontSize: 18 },
    subtextStyle: { color: "#999" }
  },
  grid: { containLabel: true, left: 40, right: 20, top: 60, bottom: 40 },
  axisPointer: { lineStyle: { color: "#ccc" } },
  xAxis: {
    axisLine: { lineStyle: { color: "#ddd" } },
    axisTick: { show: false },
    axisLabel: { color: "#777" },
    splitLine: { lineStyle: { color: "#F5F5F5" } }
  },
  yAxis: {
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { color: "#777" },
    splitLine: { lineStyle: { color: "#F5F5F5" } }
  },
  bar: {
    itemStyle: {
      barBorderRadius: [4, 4, 0, 0],
      shadowBlur: 10,
      shadowColor: "rgba(0,0,0,0.05)"
    }
  },
  line: {
    smooth: true,
    symbol: "circle",
    symbolSize: 6,
    lineStyle: { width: 3 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "rgba(255,255,255,0.2)" },
        { offset: 1, color: "rgba(255,255,255,0)" }
      ])
    }
  },
  pie: { itemStyle: { shadowBlur: 10, shadowColor: "rgba(0,0,0,0.05)" } },
  tooltip: {
    backgroundColor: "rgba(50,50,50,0.8)",
    textStyle: { color: "#fff" }
  }
});
/**
 * @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
 * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
 */
export function useEcharts(app: App) {
  app.config.globalProperties.$echarts = echarts;
}

export default echarts;
